<template>
    <div class="apply">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>申诉订单</el-breadcrumb-item>
            <el-breadcrumb-item>申诉详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
           <el-collapse  @change="handleChange"  style="min-height:300px;">
            <el-collapse-item v-for="(item,i) in detileslist" :key="i" :title="item.reportMessage" :name="index">
                <div>订单号：{{item.orderNo}}</div>
                <div>申诉原因：{{item.reportMessage}}</div>
                <div v-for="(itemImg,index) in item.reportPhotoList" :key="index">
                    <ul class="itemUl">
                        <li class="itemli" >
                            <!-- <el-image :src="itemImg" style="width: 100%;"></el-image> -->
                             <el-image 
                                style="width: 100px; height: 100px"
                                :src="itemImg" 
                               >
                            </el-image>
                        </li>
                    </ul>
                </div>
                <div>买家：{{item.buyUserName}}</div>
                <div>买家手机号：{{item.buyUserMobile}}</div>
                <div>卖家：{{item.sellUserName}}</div>
                <div>卖家手机号：{{item.sellUserMobile}}</div>
            </el-collapse-item>
          
            </el-collapse>
            <!-- <div></div> -->
            <div style="margin-top: 50px;">
                <el-button size="medium" type="danger" @click="trundown()">拒绝</el-button>
                <el-button size="medium" type="primary" @click="consent()">同意</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: ["1"],
      uuid: "",
      id: "",
      detileslist: [],
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ]
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    trundown() {
      this.$confirm("请仔细确认是否拒绝该申诉, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/manage/otcOrder/changeReportFailure", {
              queryId: this.id
            })
            .then(res => {
                 if (res.data.status == 1) {
                    this.$message({
                    type: "success",
                    message: "申诉已拒绝"
                    });
                }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    consent() {
      this.$confirm("请仔细确认是否通过该申诉, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/manage/otcOrder/changeReportSuccess", {
              queryId: this.id
            })
            .then(res => {
              if (res.data.status == 1) {
                this.$message({
                  type: "success",
                  message: "申诉已成功"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    orderDataDetail() {
      //   console.log(this.uuid)
      this.$http
        .post("/manage/otcOrder/getReportOtcOrderInfoByOrderNo", {
          queryString: this.uuid
        })
        .then(res => {
          this.detileslist = res.data.data.list;
          console.log(this.detileslist);
          this.srcList = this.detileslist.reportPhotoList;
        });
    }
  },
  mounted() {
    this.uuid = this.$route.query["uuid"] || "";
    this.id = this.$route.query["id"] || "";
    this.orderDataDetail();
  }
};
</script>
<style scoped>
.itemUl {
  list-style-type: none;
}
.itemUl .itemli {
  max-width: 300px;
}
</style>
